<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>gallery</title>
<script src="../../jQuery/jquery_1.4.2.js" type="text/javascript"></script>
<style>
#wrap{position:relative;height:160px;width:160px;overflow:hidden;}
#top{border:20px solid gray;height:120px;width:120px;position:absolute;left:0px;top:0px;}
</style>
</head>

<body>
<div id="wrap">
	<img src="../../images/p2.jpg" width="160" height="160" />
	<div id="top"></div>
</div>
<script>
$(function(){
	$('#top').hover(function(){
		$(this).animate({'width':'200px',height:'200px',left:'-20px',top:'-20px',opacity:0},200)
	},function(){
		$(this).animate({'width':'120px',height:'120px',left:'0px',top:'0px',opacity:1},200)
	})
});
</script>
</body>
</html>
